<template>
	<div class="Headd">
		<div class="my_head">
				<!-- $router.push({path:routt}) -->
				<!-- <div class="my_back fl" @click="$router.go(-1)"></div> -->
			<slot name="islink"></slot>
			<slot name="car"></slot>
			<slot name="search"></slot>
			<span class="icon_mark" @click="maskk"></span>
		</div>
		<div class="Mask hide" ref="mask">

		</div>
		<div class="nav_sons hide" ref="navsons">
			<div class="nav_son_tit">
				<span class="icon-top"></span>
				<router-link :to="val.path" :class="val.class" v-for="val,index in routerr" :key='index'>
					<span class="icon"></span>
					{{val.tit}}
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				routerr: [{
						'class': 's1',
						'tit': '首页',
						'path': '/'
					},
					{
						'class': 's2',
						'tit': '分类',
						'path': '/Sort'
					},
					{
						'class': 's3',
						'tit': '购物车',
						'path': '/Shopping'
					},
					{
						'class': 's4',
						'tit': '我的',
						'path': '/My'
					}
				]
			};
		},
		methods: {
			maskk() {

				if (this.$refs.mask.style.display != 'block') {
					this.$refs.mask.style.display = 'block'
					this.$refs.navsons.style.display = 'block'
				} else {
					this.$refs.mask.style.display = 'none'
					this.$refs.navsons.style.display = 'none'
				}
			}
		}
	};
</script>

<style>
	.Headd{
		width: 100%;
		overflow: hidden;
		height: 55px;
		z-index: 10;
		position: fixed;
		top: 0;
	}
	.my_head {
		display: block;
		width: 100%;
		background: #fff;
		position: absolute;
		top: 0;
		left: 0;
		line-height: 55px;
		height: 55px;
		text-align: center;
		z-index: 10;
		border-bottom: 1px solid #ddd;
		font-size: 1.3rem;
		font-weight: 700;
	}

	.my_head .my_back {
		display: inline-block;
		width: 45px;
		height: 45px;
		position: absolute;
		top: 0px;
		left: 10px;
		background-repeat: no-repeat;
		background-image: url(../assets/imgs/icon6.png);
		background-position: -66px 13px;
		background-size: 100px;
	}

	.my_head .icon_mark {
		position: absolute;
		top: 0px;
		right: 10px;
		background-repeat: no-repeat;
		background-image: url(../assets/imgs/icon6.png);
		background-position: -25px 14px;
		width: 45px;
		background-size: 90px;
		height: 44px;
	}

	.Mask {
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.5;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
	}

	.nav_sons {
		width: 100px;
		background: #fff;
		position: fixed;
		z-index: 10;
		top: 70px;
		right: 7px;
		border: 1px solid #ddd;
	}

	.nav_sons .nav_son_tit {
		position: relative;
	}

	.nav_sons .nav_son_tit .icon-top {
		position: absolute;
		width: 26px;
		height: 22px;
		right: 9px;
		top: -14px;
		display: inline-block;
		background-position: 0px 1px;
		background-image: url(../assets/imgs/search_top.png);
		background-repeat: no-repeat;
	}

	.nav_sons .nav_son_tit a {
		padding: 0 10px;
		display: block;
		line-height: 36px;
		border-bottom: 1px solid #ddd;
		font-size: 0.6rem;
	}

	.nav_sons .nav_son_tit a .icon {
		display: inline-block;
		width: 22px;
		height: 22px;
		background-image: url(../assets/imgs/icon6.png);
		background-repeat: no-repeat;
		background-position: 0px 1px;
		background-size: 400%;
		vertical-align: middle;
		margin-right: 10px;
	}

	.nav_sons .nav_son_tit .s1 .icon {
		background-position: -5px -46px;
	}

	.nav_sons .nav_son_tit .s2 .icon {
		background-position: -26px -46px;
	}

	.nav_sons .nav_son_tit .s3 .icon {
		background-position: -45px -46px;
	}

	.nav_sons .nav_son_tit .s4 .icon {
		background-position: -65px -46px;
	}
	
</style>
